<script lang="ts">
import { Vue, Watch, Prop } from "vue-property-decorator";
import store from "@/assets/modules/store";
import { getModule, getModules } from "@/assets/modules/arcgisAPI";
import { hex2Rgba } from "~/assets/modules/utils";
import { changeExtent } from "@/assets/modules/utils";
import exportVue from "@/assets/modules/exportVue";
export default class extends Vue {
  evt: any = null;

  clickObject: any = "";

  highlight: any = null;

  trackLayer: any = null;

  get view() {
    return store.mapView;
  }

  get loaded2d() {
    return this.$store.getters["view/loaded2d"];
  }

  @Watch("loaded2d")
  async handleLoadedChange() {
    if (this.loaded2d) {
    }
  }

  async addGraphics(features: any[]) {
    const win = window as any;
    const areaConfig = win.areaConfig;
    const color = areaConfig.color;
    const Graphic = await getModule("esri/Graphic");
    this.clearGraphic();
    const view = this.view;
    if (!view) return;
    const graphics = features.map(el => {
      const feature = el.clone();
      const id = el.attributes.QJDM;
      const c: string = color[id.substr(0, 6)] || "#ffffff";
      feature.symbol = {
        type: "simple-fill",
        style: "solid",
        color: hex2Rgba(c + "1a"),
        outline: {
          color: c,
          width: 2
        }
      };
      return feature;
    });
    const points = features.map(el => {
      const pointGraphic = new Graphic({
        geometry: el.geometry.centroid,
        symbol: this.getTextSymbol(el.attributes.QJMC)
      });
      return pointGraphic;
    });

    view.graphics.addMany(graphics);
    view.graphics.addMany(points);
  }

  getTextSymbol(text: string, level?: number) {
    return {
      type: "text",
      color: "black",
      haloColor: "white",
      haloSize: "2px",
      text,
      font: {
        size: level === 2 ? "14px" : "16px"
      }
    };
  }

  destroy() {
    this.clearGraphic();
    // this.closeGridLayer();
    this.closeFloorLayer();
    this.clickObject = "";
    if (this.evt) {
      this.evt.remove();
      this.evt = null;
    }
    if (this.highlight) {
      this.highlight.remove();
    }
  }

  clearGraphic() {
    const view = this.view;
    if (!view) return;
    view.graphics.removeAll();
  }

  // 绑定地图点击事件
  bindClickEvt() {
    if (this.evt) {
      this.evt.remove();
      this.evt = null;
    }
    if (this.view) {
      this.evt = this.view.on("click", (e: any) => {
        this.view.hitTest(e, this.view.graphics).then((res: any) => {
          // this.$store.commit("panel/setLeftPanelShow", true);
          const results = res.results;
          for (let i = 0; i < results.length; i++) {
            const graphic = results[i].graphic;
            if (this.clickObject === "floor") {
              this.$store.commit("panel/setLeftPanelShow", true);
              if (graphic.layer.id === "floor") {
                this.view
                  .whenLayerView(graphic.layer)
                  .then((layerView: any) => {
                    const query = layerView.createQuery();
                    query.returnGeometry = true;
                    query.outFields = ["*"];
                    query.where = `OBJECTID = ${graphic.attributes.OBJECTID}`;
                    graphic.layer.queryFeatures(query).then((results: any) => {
                      if (results && results.features) {
                        if (this.highlight) {
                          this.highlight.remove();
                        }
                        this.highlight = layerView.highlight(results.features);
                        exportVue.$emit("get-floor-click", results.features[0]);
                      }
                    });
                  });
              }
            }
          }
        });
      });
    }
  }

  closeGridLayer() {
    const view = this.view;
    if (!view) return;
    const layers = view.map.layers.filter((el: any) => {
      return el.id === "grid";
    });
    store.wgfwLayer = null;
    view.map.removeMany(layers);
  }
  /**
   * 添加石亭路楼盘表服务
   **/
  async addFloor() {
    const url = (window as any).urlConfig.LPB.url;
    const modules = await getModules([
      "esri/layers/FeatureLayer",
      "esri/layers/MapImageLayer"
    ]);
    const [FeatureLayer, MapImageLayer] = modules;
    store.floorLayer = new FeatureLayer({
      id: "floor",
      url
    });
    this.view.map.add(store.floorLayer);
    const layer = new MapImageLayer({
      id: "floor-image",
      title: "楼盘阴影",
      url,
      sublayers: [
        {
          id: 0,
          visible: true
        }
      ]
    });
    this.view.map.add(layer);

    // const point = new Point({
    //   x: 118.08761366875743,
    //   y: 24.483309386311685,
    //   spatialReference: store.spatialReference
    // });
    // this.view.goTo({
    //   target: point,
    //   scale: 1000
    // });
  }

  closeFloorLayer() {
    const view = this.view;
    if (!view) return;
    const layers = view.map.layers.filter((el: any) => {
      return el.id === "floor" || el.id === "floor-image";
    });
    view.map.removeMany(layers);
    store.floorLayer = null;
  }

  highLightFloor(lzId: string) {
    console.log(lzId);
    const view = this.view;
    if (!view) return;
    exportVue.$emit("get-floor", null);
    view.whenLayerView(store.floorLayer).then((layerView: any) => {
      let query = store.floorLayer.createQuery();
      query.where = "LPBDZBH = " + lzId;
      query.outSpatialReference = store.spatialReference;
      store.floorLayer.queryFeatures(query).then((result: any) => {
        if (this.highlight) {
          this.highlight.remove();
        }
        if (result && result.features && result.features.length > 0) {
          this.highlight = layerView.highlight(result.features[0]);
          view.extent = changeExtent(
            result.features[0].geometry.extent.clone()
          );
          exportVue.$emit("get-floor", result.features[0]);
        } else {
          this.$message.warning({
            duration: 1000,
            message: "数据源未收录楼幢面位置"
          });
          exportVue.$emit("get-floor", null);
        }
      });
    });
  }
}
</script>

<style></style>
